<template>
 <el-select
    :style="{'width':width}"
    v-model="value"
    filterable
    remote
    placeholder="输入仓库关键词"
    clearable
    :remote-method="remoteMethod"
    @focus="handleFocus"
    @change="handleSelect"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
import stock from '@/api/eims/stockAPI'
export default {
  model: {
    prop: 'warehouseCode',
    event: 'select'
  },
  props: {warehouseCode: String, width: {type: String, default: '280px'}},
  data () {
    return {
      options: [],
      value: this.warehouseCode,
      loading: false,
      warehouseInfList: []
    }
  },
  watch: {
    warehouseCode (val) {
      this.value = val
    }
  },
  mounted () {
    this.getWarehouseList()
  },
  methods: {
    handleSelect (item) {
      this.$emit('select', item)
    },
    handleFocus () {
      this.options = this.warehouseInfList
    },
    getWarehouseList () {
      stock.getWarehouseAllAPI().then((res) => {
        if (res.data && res.data !== null) {
          this.warehouseInfList = res.data.map(item => {
            return { value: `${item.warehouseCode}`, label: `${item.warehouseName}` }
          })
        }
      })
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.warehouseInfList.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
